<!DOCTYPE html>
<html class="ui-page-login">

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<link href="css/style.css" rel="stylesheet" />
		<link rel="stylesheet" href="css/aui.css" />
		<link rel="stylesheet" href="css/my.css" />
		<link rel="stylesheet" href="js/layer/need/layer.css" />
		<style>
			.aui-list .aui-list-item-title {
				color: #686868;
			}
			
			.aui-border-b-0 {
				border-bottom: none!important;
			}
			.aui-grid [class*=aui-col-]{
				padding: .5rem 0;
			}
			.middle_banner .swiper-slide{
				width: 3rem!important;
			}
			.aui-grid .aui-iconfont.aui-imgs{
			  	width: 97%;
			  	height: auto;
			}
			.aui-class-actives.aui-active{
				color: #9ac2e5;
    			border-bottom: 1px solid #9ac2e5;
			}
			.tab-class-img{
			    vertical-align: middle;
			    display: inline-block;
			    overflow: hidden;
			    text-align: center;
			    width: 80%;
			    border-radius: 5px;
			    -webkit-border-radius: 5px;
			    -moz-border-radius: 5px;
			    margin-right: .5rem;
			}
			.tab-class-items{
				vertical-align: middle;
			    display: inline-block;
			    overflow: hidden;
			    text-align: center;
			    width: 6.5rem;
			    border-radius: 5px;
			    -webkit-border-radius: 5px;
			    -moz-border-radius: 5px;
			    margin-right: .5rem;
			}
			.tab-class-items a,.tab-sec-img a{
				display: flex;
				justify-content: space-between;
				align-items: center;
				margin-top: .5rem;
			}
			.tab-class-items a img{
				width: 3rem;
			}
			.tab-sec-img{
				width: auto;
			}
			.tab-sec-img img{width: 7rem;margin-right: .5rem;}
			.aui-font-size-20{
				font-size:0.8rem !important;
				color:#e1e1e1;
			}
		</style>

	</head>

	<body class="aui-background-white">
		<header class="aui-bar aui-bar-nav aui-background-white aui-position-fixed aui-bar-nav-search aui-text-default">
			<a class="aui-pull-left aui-btn" href="JavaScript:history.go(-1)">
				<span class="aui-iconfont aui-icon-left aui-color-three aui-font-size-14"></span>
			</a>
			<div class="aui-title aui-color-three title aui-font-size-14">
				课程列表
			</div>
		</header>
		
		<div class="aui-content aui-background-white aui-nav-search-fixed" style="margin-top:2rem;overflow-y:scroll ;">
			<div class="aui-margin-t-15 aui-margin-b-10 aui-cho-class">
				<div class="aui-class-choose aui-margin-t-15 aui-padded-l-15 qui-padded-r-15">
					<span  class="aui-mid-bgc" onclick="getData(10)">全部</span>
					<span onclick="getData(0)">一年级</span>
					<span onclick="getData(1)">二年级</span>
					<span onclick="getData(2)">三年级</span>
					<span onclick="getData(3)">四年级</span>
					<span onclick="getData(4)">五年级</span>
					<span onclick="getData(5)">六年级</span>
				</div>		
			</div>
			<div class="aui-class-contents aui-class-tops">				
					<ul class="aui-list aui-media-list aui-border-t-0" id="classInfo">
						<a href="">
							<li class="aui-list-item aui-border-b-0 aui-list-item-middle aui-padded-r-15 aui-background-white">
								<div class="aui-media-list-item-inner" style="align-items: center;">
									<div class="aui-list-item-media wechat-avatar aui-list-media-img aui-position-relative" style="width: 4rem;">
										<img src="images/items.jpg" class="aui-border-radius">
										<div class="aui-lists-plays aui-position-absolute aui-width-one aui-lists-redio aui-flx-space aui-padded-l-5 aui-padded-r-5">
											<p class="aui-text-white aui-font-size-12">
												<img src="images/ear.png" alt="" class="aui-pull-left"><span class="aui-font-size-12 trans-eight aui-style-normal">27 万</span> 
											</p>
											<span>
												<img src="images/plays.png" alt="">
											</span>
										</div>
									</div>
									<div class="aui-list-item-inner aui-padded-l-10 aui-padded-t-0" style="height: 4rem;">
										<p class="aui-color-three aui-font-size-14 aui-ellipsis-1">风住的街道</p>
										<p class="aui-margin-t-5 aui-font-size-12 aui-ellipsis-2">纪由美子</p>
									</div>
									<div class="aui-text-default aui-margin-t-5">
										<i class="aui-iconfont aui-icon-right aui-font-size-12"></i>
									</div>
								</div>
							</li>
						</a>
						<a href="">
							<li class="aui-list-item aui-border-b-0 aui-list-item-middle aui-padded-r-15 aui-background-white">
								<div class="aui-media-list-item-inner" style="align-items: center;">
									<div class="aui-list-item-media wechat-avatar aui-list-media-img aui-position-relative" style="width: 4rem;">
										<img src="images/items.jpg" class="aui-border-radius">
										<div class="aui-lists-plays aui-position-absolute aui-width-one aui-lists-redio aui-flx-space aui-padded-l-5 aui-padded-r-5">
											<p class="aui-text-white aui-font-size-12">
												<img src="images/ear.png" alt="" class="aui-pull-left"><span class="aui-font-size-12 trans-eight aui-style-normal">27 万</span> 
											</p>
											<span>
												<img src="images/plays.png" alt="">
											</span>
										</div>
									</div>
									<div class="aui-list-item-inner aui-padded-l-10 aui-padded-t-0" style="height: 4rem;">
										<p class="aui-color-three aui-font-size-14">风住的街道</p>
										<p class="aui-margin-t-5 aui-font-size-12 aui-ellipsis-2">纪由美子</p>
									</div>
									<div class="aui-text-default aui-margin-t-5">
										<i class="aui-iconfont aui-icon-right aui-font-size-12"></i>
									</div>
								</div>
							</li>
						</a>
						<a href="">
							<li class="aui-list-item aui-border-b-0 aui-list-item-middle aui-padded-r-15 aui-background-white">
								<div class="aui-media-list-item-inner" style="align-items: center;">
									<div class="aui-list-item-media wechat-avatar aui-list-media-img aui-position-relative" style="width: 4rem;">
										<img src="images/items.jpg" class="aui-border-radius">
										<div class="aui-lists-plays aui-position-absolute aui-width-one aui-lists-redio aui-flx-space aui-padded-l-5 aui-padded-r-5">
											<p class="aui-text-white aui-font-size-12">
												<img src="images/ear.png" alt="" class="aui-pull-left"><span class="aui-font-size-12 trans-eight aui-style-normal">27 万</span> 
											</p>
											<span>
												<img src="images/plays.png" alt="">
											</span>
										</div>
									</div>
									<div class="aui-list-item-inner aui-padded-l-10 aui-padded-t-0" style="height: 4rem;">
										<p class="aui-color-three aui-font-size-14">风住的街道</p>
										<p class="aui-margin-t-5 aui-font-size-12 aui-ellipsis-2">纪由美子</p>
									</div>
									<div class="aui-text-default aui-margin-t-5">
										<i class="aui-iconfont aui-icon-right aui-font-size-12"></i>
									</div>
								</div>
							</li>
						</a>
						
					</ul>
				</div>	
			</div>
			
			<div class="aui-foot-height"></div>
				
		

		<script src="js/jquery-1.7.2.min.js"></script>
		<script src="js/public.js"></script>
		<script src="js/layer/layer.js"></script>
		<script src="js/class.js"></script>
		<script>
			$('body').on('click','.aui-class-choose span',function(){
				$(this).addClass('aui-mid-bgc').siblings().removeClass('aui-mid-bgc')
			})
			
		</script>
	</body>

</html>